---
id: welcome
title: Welcome to Solito
sidebar_label: Welcome
slug: /
---

<img
  src="/img/og.svg"
  style={{
    display: 'block',
    borderRadius: '16px',
    overflow: 'hidden',
    marginBottom: '32px',
  }}
/>

Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps.

:::tip Hackernews

Solito reached #3 on the front page of Hackernews. Check out the [post here](https://news.ycombinator.com/item?id=30678100).

:::

## About

This library is two things:

1. A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms.
2. A set of patterns and examples for building cross-platform apps with React Native + Next.js.

## Motivation

In 2021, I spoke at Next.js Conf about how I built [beatgig.com](https://beatgig.com) with Next.js and React Native.

Since then, a sizable community has grown around this stack. The goal of this project is to bring together the hardest piece of cross-platform development: navigation.

If you haven't seen it yet, I recommend you watch the talk:

<div style={{ maxWidth: '100%', overflowX: 'auto' }}>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/0lnbdRweJtA"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

In June 2022, I spoke about Solito at App.js Conf in Poland. In that talk, I also released the first version [zeego](https://github.com/nandorojo/zeego), a cross-platform menu library I built inspired by Radix UI.

<div style={{ maxWidth: '100%', overflowX: 'auto' }}>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/0FfvIuSouTU"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

The Solito stack slowly transitioned from a lofty idea to a library and community used by many apps in production.

But many questions sparked up:

- Can I use file-system routing on the native app?
- How do I handle authentication?
- What about UI patterns like menus? Can I use libraries like Radix UI?

To address these questions and more, I spoke at Next.js Conf 2022 to show where the React Native + Next.js stack was.

<div style={{ maxWidth: '100%', overflowX: 'auto' }}>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/H1gSWXA3qfw"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

## Background

Prior to Solito, I built [Moti](https://moti.fyi) for cross-platform animations, powered by Reanimated 2. I also made [Dripsy](https://dripsy.xyz), a library for building theme-based, responsive design for React Native and Web.

Little by little, I released a [number of libraries](https://github.com/nandorojo) dedicated to Next.js + React Native.

One of my first, [`expo-next-react-navigation`](https://github.com/nandorojo/expo-next-react-navigation), was the earliest iteration of Solito. I used this for a few years as I built out [BeatGig](https://beatgig.com). Eventually, I realized that the API was too convoluted to work as a replacement for `next/router`. Then React Navigation [released a great API](https://reactnavigation.org/docs/configuring-links) for navigating around with URLs, and I realized that that would be the future.

I opened an issue on `expo-next-react-navigation` called ["The Future API"](https://github.com/nandorojo/expo-next-react-navigation/issues/68) where I thought through all the necessary steps to truly unify the stack.

Next, [I worked on a PR](https://github.com/axeldelafosse/expo-next-monorepo-example/pull/1) with Axel Delafosse, hoping to share navigation code between Expo + Next.js. That PR has nearly 100 comments from people in the community chiming in on my ideas. Ultimately, [I dropped](https://github.com/axeldelafosse/expo-next-monorepo-example/pull/1#issuecomment-1005969004) the approach I built in that PR in favor of a simpler, headless navigation method. And there, Solito was born.

### The rabbit hole

If you are curious about my journey working on Expo + Next.js, and how I arrived here, I recommend doing a few things:

1. Watch my [Next.js Conf talk](#motivation).
2. Follow me on [Twitter](https://twitter.com/fernandotherojo) and read through my tweets.
3. Read through issues & PRs created by me on my GitHub repos – mainly on [Moti](https://github.com/nandorojo/moti) and [Dripsy](https://github.com/nandorojo/dripsy).

   a. For example, in [this issue](https://github.com/nandorojo/dripsy/issues/46) on the Dripsy repo, I explained my desire for a high-performance, simple animation library. That idea became Moti, which is now one of the most popular libraries for animating in React Native (+ Web).

   b. I spent a lot of time trying to add SSR support to Dripsy to Next.js, and ultimately [dropped it](https://github.com/nandorojo/dripsy/issues/100) due to limitations from React Native. If you do some Googling about React Native Web's Server Side Rendering support, you'll find me talking about it.

c. [This PR](https://github.com/axeldelafosse/expo-next-monorepo-example/pull/1) I mentioned earlier is good to read through too (not the code, just the comments.) [Here](https://github.com/axeldelafosse/expo-next-monorepo-example/pull/1#issuecomment-1005969004) I unveil the idea for the Solito methodology.

4. Listen to this [episode](https://reactnativeradio.com/episodes/rnr-224-react-native-web-on-nextjs-with-fernando-rojo) of React Native Radio, where we discuss Expo + Next.js.

5. Read the Solito [Gradual Adoption](/gradual-adoption) and [Methodology](/methodology) sections.

6. Read the introduction of the [Moti docs](https://moti.fyi), where I shared my thoughts on the state of React Native.

Special thanks to [Axel](https://axeldelafosse.com) for sharing my love for this stack and for coming up with the idea of an Expo + Next.js "metaframework".
